<route lang="jsonc" type="page">
{
  "layout": "tabbar",
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "位置信息"
  }
}
</route>

<script lang="ts" setup>
const list = ref([
  {
    icon: 'fa-briefcase',
    location: '书房',
    name: '书房',
    count: 12,
    id: 1,
  },
  {
    icon: 'fa-bed',
    location: '卧室',
    name: '卧室',
    count: 25,
    id: 2,
  },
  {
    icon: 'fa-television',
    location: '客厅',
    name: '客厅',
    count: 8,
    id: 3,
  },
  {
    icon: 'fa-cutlery',
    location: '厨房',
    name: '厨房',
    count: 40,
    id: 4,
  },
  {
    icon: 'fa-archive',
    location: '储藏室',
    name: '储藏室',
    count: 31,
    id: 5,
  },
])
function handAdd() {
  list.value.push({
    icon: 'fa-briefcase',
    location: '书房',
    name: '书房',
    count: 12,
    id: list.value.length + 1,
  })
}
</script>

<template>
  <view class="h-full bg-slate-100 p-4 pt-6 text-slate-800">
    <view class="mb-6 flex items-center">
      <view class="mx-auto text-2xl font-bold">
        按位置查看
      </view>
    </view>
    <view class="grid grid-cols-2 gap-4">
      <template v-for="item in list" :key="item.id">
        <CommonCard :card="item" />
      </template>
      <view
        class="flex flex-col items-center justify-center border-2 border-slate-300 rounded-xl border-dashed p-4 text-center text-slate-400"
        @click="handAdd"
      >
        <view class="fa fa-plus-circle text-4xl" />
        <view class="mt-2 font-bold">
          添加新位置
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
